<template>
    <div style="position: relative;overflow-y:auto;width:100%;">
	    <div :style="style" ref="box">
		    <div ref="container" style="max-width:100%;margin:auto"></div>
	    </div>
        <tip ref="tip" :x="left" :y="top">
            <div slot="content">
                <slot name="tip"></slot>
            </div>
        </tip>
    </div>
</template>
	<script type="text/javascript" src="../../../../public/mxgraph/javascript/mxClient.js"></script>
<script>
    // import {
    //     mxCodec as MxCodec,
    //     mxEvent as MxEvent,
    //     mxGeometry as MxGeometry,
    //     mxGraph as MxGraph,
    //     mxGraphModel as MxGraphModel,
    //     mmx as MxUtils
    // } from 'mxgraph/javascript/mxClient'
    import Tip from '../tip'

    export default {
        name: "graphView",
        props: {
            xmlData: {
                type: String,
                default: ""
            },
            editMode: {
                type: Boolean,
                default: false
            },
            isMove: {
                type: Boolean,
                default: false
            }
        },
        components: {
            Tip
        },
        data() {
            return {
                graph: null,
                left: 0,
                top: 0,
                dbCell: null,
				style: {
					width: '100%',
					height: '100%',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center'
				},
                param: {
                    boxWidth: 0,
                    boxHeight: 0,
                    containerWidth: 0,
                    containerHeight: 0,
                }
            }
        },
        methods: {
            show() {
                const graph = this.graph === null ? new mxGraph(this.$refs.container) : this.graph
                graph.resizeContainer = true;
                graph.setEnabled(false);

                graph.setHtmlLabels(true); //文本换行操作
                graph.setEnabled(false); //graph不可拖拽
                graph.convertValueToString = function (cell) {
                    if (mxUtils.isNode(cell.value)) {
                        if (cell.value.nodeName.toLowerCase() == 'object') {
                            let labelName = cell.getAttribute('label', '');
                            return labelName;
                        }
                    } else {
                        return cell.value;
                    }
                };
                this.decode(this.xmlData, graph)
            },
            decode(graphXml, graph) {
                window['mxGraphModel'] = mxGraphModel
                window['mxGeometry'] = mxGeometry

                const xmlDocument = mxUtils.parseXml(graphXml)

                const decoder = new mxCodec(xmlDocument)
                const node = xmlDocument.documentElement

                decoder.decode(node, graph.getModel())
                this.initParam();
                this.graph = graph;
                this.graph.fit();
                // console.log("this.param",this.param)
                // this.graph.doResizeContainer(this.param.containerWidth, this.param.containerHeight)
                // this.graph.view.setScale(this.param.boxHeight / this.param.containerHeight)
                this.changeListener()
            },
            click(sender, evt) {
                var cell = evt.getProperty('cell');
                // console.log('CLICK', cell, sender, evt)
                // console.log(evt.properties.event.layerX, evt.properties.event.layerY, cell.id, cell.value.outerHTML)
                this.left = evt.properties.event.layerX
                this.top = evt.properties.event.layerY
                // this.$refs.tip.show()
                this.$emit('click', cell)
            },
            dbClick(sender, evt) {
                var cell = evt.getProperty('cell');
                // console.log('DOUBLE_CLICK', cell, sender, evt)
                // console.log(evt.properties.event.offsetX, evt.properties.event.offsetY, cell.id, cell.value.outerHTML)
                this.$emit('dbClick', cell.getStyle())
                this.dbCell = cell
            },
            changeListener() {
                if(this.isMove){
                    this.graph.addMouseListener(
                        {
                            mouseMove: (sender, evt)=>
                            {
                                // console.log('移动')
                                // console.log(evt)
                                // console.log(evt.getCell())
                                var cell = evt.getCell()
                                // console.log('cell',cell)
                                this.$emit('mouseover', cell)

                                // 设置鼠标为样式为手状
                                var sta=true
                                if(evt.getState()==undefined){
                                    var sta=false
                                    // console.log('sta',sta)
                                }else{
                                    sta=true
                                }
                                // cell.sta=sta
                                this.$emit('mouseout',sta)
                                evt.getState().setCursor('pointer');

                            },
                            mouseDown: function(sender, me) { },
                            mouseUp: mxUtils.bind(this, function(sender, me)
                            {
                                if (this.active)
                                {
                                    this.stop();
                                }
                            })
                        }
                    )
                }
                if (this.graph !== null) {
                    if (this.editMode) {
                        this.$refs.tip.close()
                        this.graph.removeListener(this.click)
                        this.graph.addListener(mxEvent.DOUBLE_CLICK, this.dbClick)
                    } else {
                        this.graph.fit();
                        this.graph.removeListener(this.dbClick)
                        this.graph.addListener(mxEvent.CLICK, this.click)
                    }
                }
            },
            changeStyle(style) {
                this.dbCell.setStyle(style)
                this.graph.refresh(this.dbCell)
            },
            toXml() {
                const decoder = new mxCodec()
                this.graph.fit();
                let xml = Mmx.getXml(decoder.encode(this.graph.getModel()))
                this.$emit('showXml', xml)
            },
            initParam() {
                this.param.boxHeight = this.$refs.box.offsetHeight
                this.param.boxWidth = this.$refs.box.offsetWidth
                this.param.containerHeight = this.$refs.container.offsetHeight
                this.param.containerWidth = this.$refs.container.offsetWidth
            }
        },
        watch: {
            editMode() {
                this.changeListener()
            },
            xmlData(){
                this.show();
            }
        },
mounted(){
  this.$emit('handler')
}
    }
</script>

<style scoped>
</style>
